import "./App.css";
import { Outlet, useNavigate } from "react-router-dom";
import { Tabbar } from "@nutui/nutui-react";
import "@nutui/nutui-react/dist/style.css";
import { HomeOutlined } from "@ant-design/icons";
import { UserOutline, CompassOutline, PhoneFill } from "antd-mobile-icons";
import { useState } from "react";
function App() {
  let Navigate = useNavigate();
  let [index, setIndex] = useState(0);
  let items = [
    { title: "首页", icon: HomeOutlined },
    { title: "发现", icon: CompassOutline },
    { title: "设备", icon: PhoneFill },
    { title: "我的", icon: UserOutline },
  ];
  let Change = (value) => {
    if (value == 0) {
      Navigate("/app/shou");
    } else if (value == 1) {
      Navigate("/app/found");
    } else if (value == 2) {
      Navigate("/app/she");
    } else if (value == 3) {
      Navigate("/app/my");
    }
  };
  return (
    <div id="app">
      <Outlet></Outlet>
      <div>
        <Tabbar
          defaultValue={0}
          activeColor="white"
          inactiveColor="#2A6049"
          onSwitch={(value) => {
            Change(value);
            setIndex(value);
          }}
          style={{ position: "fixed", bottom: 0 }}
        >
          {items.map((item, value) => {
            return (
              <Tabbar.Item
                key={value}
                title={index == value ? item.title : ""}
                icon={
                  <item.icon
                    style={{ fontSize: "clamp(0.1rem, 5vw, 10rem)" }}
                  />
                }
                className={index == value ? "active" : "none"}
              />
            );
          })}
        </Tabbar>
      </div>
    </div>
  );
}

export default App;
